<style>
  [v-cloak]{
    display: none;
  }
</style>
<template>
  <el-table
          :data="tableData"
          style="width: 100%">
    <el-table-column
            label="用户名"
            width="180">
      <template #default="scope">

        <span style="margin-left: 10px">{{ scope.row.username }}</span>
      </template>
    </el-table-column>
    <el-table-column
            label="姓名"
            width="180">
      <template #default="scope">

        <span style="margin-left: 10px">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column
            label="角色"
            width="180">
      <template #default="scope">

        <span style="margin-left: 10px">{{ scope.row.actor }}</span>
      </template>
    </el-table-column>
    <el-table-column
            label="部门"
            width="180">
      <template #default="scope">

        <span style="margin-left: 10px">{{ scope.row.department }}</span>
      </template>
    </el-table-column>
    <el-table-column
            label="联系方式"
            width="180">
      <template #default="scope">

        <span style="margin-left: 10px">{{ scope.row.telNumber }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog title="角色修改" v-model="dialogFormVisible">
    <el-form :model="form">

      <el-form-item label="用户部门" :label-width="formLabelWidth">
        <el-select v-model="form.departmentId" placeholder="请选择用户部门">
          <el-option label="燃料管理部"  value="1"></el-option>
          <el-option label="监察部"  value="2"></el-option>
          <el-option label="信息管理部"  value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="用户角色" :label-width="formLabelWidth">
        <el-select v-model="form.actorId" placeholder="请选择用户角色">
          <el-option label="平台超级管理员"  value="1"></el-option>
          <el-option label="注册用户审核人员"  value="2"></el-option>
          <el-option label="交易审核人员"  value="3"></el-option>
          <el-option label="资讯审核人员"  value="4"></el-option>
          <el-option label="资讯维护人员"  value="5"></el-option>
          <el-option label="资讯编辑人员"  value="6"></el-option>
          <el-option label="交易发起人"  value="7"></el-option>
          <el-option label="财务人员"  value="8"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="联系方式" :label-width="formLabelWidth">
        <el-input v-model="form.telNumber" autocomplete="off"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="updateUser()">提 交</el-button>
    </span>
    </template>
  </el-dialog>


</template>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>

<script>
  import axios from "axios"

  export default {
    data() {
      return {
        user: JSON.parse(window.sessionStorage.getItem('userDate')),
        tableData: [{id:null,username:null,name:null,actor:null,department: null,telNumber:null,departmentId:null,actorId: null}],
        visible: false,
        root: false,
        dialogFormVisible: false,
        form: {
          actorId:null,
          departmentId:null,
          id: null,
          name: null,
          password: null,
          telNumber: null,
          userName: null
        },
        formLabelWidth: '120px'
      }
    },
    methods: {
      handleEdit(index, row) {
        this.form=row
        this.dialogFormVisible=true
      },
      updateUser(){
        if(this.user.actor!=="平台超级管理员"){
          this.$message({
            showClose: true,
            message: '无权限操作！',
            type: 'success'
          });
          return false;
        }
        var token = this.user.token
        this.postRequest('/updateUser?token='+token,this.form)
                .then(response=> {
                  this.dialogFormVisible = false
                  this.$message({
                    showClose: true,
                    message: '修改成功！',
                    type: 'success'
                  });
                  this.setdata()
                })
                .catch(function (error) {
                  console.log(error);
                });
      },
      handleDelete(index, row) {
        console.log("=================")
        console.log(localStorage.root)
        if(this.user.actor!=="平台超级管理员"){
          this.$message({
            showClose: true,
            message: '无权限操作！',
            type: 'success'
          });
          return false;
        }
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let a={};
          a.id=row.id;
          var token = this.user.token
          this.postRequest('/deleteUser?token='+token+"&id="+a.id)
                  .then(response=> {
                    this.$message({
                      showClose: true,
                      message: '删除成功！',
                      type: 'success'
                    });
                    this.visible=false
                    this.setdata()
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
      },
      setdata(){
        var token = this.user.token
        this.getRequest('/userInfo?token='+token)
                .then(response=> {
                  this.tableData=response.data
                  this.root= localStorage.root;
                  this.isShow=true;
                })
                .catch(function (error) {
                  console.log(error);
                });
      }
    },
    beforeRouteEnter:(to,from,next)=>{
      next(vm => {vm.setdata()});
    }
  }
</script>
